<template>
    <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="6" :xs="24">
            <DeptSelectTree @confirm="deptConfirm"></DeptSelectTree>
        </el-col>
        <el-col :span="18" :xs="24">
            <!-- 表格数据 -->
            <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="角色编号" prop="id" width="100" align="center" />
                <el-table-column label="角色标识" prop="roleKey" :show-overflow-tooltip="true" width="100" />
                <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true"  />
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"  @pagination="handleQuery" />
        </el-col>
    </el-row>
</template>
<script setup>
import DeptSelectTree from '../DeptSelectTree'
import { queryList } from '../../api/role'
const emit = defineEmits(['update:value'])
const props = defineProps({
    value:{
        type:[Array],
        default:[]
    },
})
const queryParams = ref({
    deptId: undefined,
    pageNum: 1,
    pageSize: 10,
    status: 1
})
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const ids = ref([])
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        tableData.value = response.content;
        total.value = response.totalElements;
        loading.value = false;
    })
}
// 部门确认
function deptConfirm(e) {
    queryParams.value.deptId = e
    queryParams.value.pageNum = 1
    handleQuery()
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    console.log(ids.value)
    emit('update:value',ids.value)
}
// 初始化执行
handleQuery()
</script>